// 文章页面样式
.article {
  margin-top: 100px;

    .label {
      margin: 0 auto;
    }

    // 左侧
    .ant-layout-sider {
        background: none;
    }

    // 整体内容 ant-layout-sider
    .ant-layout {
      max-width: 1200px;
      border-radius: 10px;
      background-color: #fff;
      .ant-layout-content {
        padding: 10px !important;
      }
      // 文章数据图标
      .ant-list-item-action {
        margin-top: 20px;
        li {
          margin-right: 20px;
          // em
          .ant-list-item-action-split {
            right: -10px;
          }
        }
      }
      // 分页
      .ant-list-pagination {
        margin-top: 30px;
      }
    }

    // 右侧
    .article-content {
      // 每项列表
      .ant-list-item {
        // 文字部分
        .ant-list-item-main {
          display: flex;
          flex-direction: column;
          justify-content: spac-between;
        }
      }
    }


  @media screen and (max-width: 1200px) {
    .label {
      margin: 30px 50px;
      // 左侧隐藏
      h2,
      .ant-layout-sider {
        display: none;
      }
    }
  }

  // 屏幕宽度小于 768px 时，文章发送变化，上图下文
  @media screen and (max-width: 768px) {
    .label {
      margin: 20px;
      // 右侧
      .article-content {
        // 文章整体内容
        .ant-spin-container {
          // 每一项文章 li
          .ant-list-item {
            flex-direction: column;
            padding: 16px 0;
            // 文字框
            .ant-list-item-main {
              order: 1;
              padding-top: 10px;
            }
            // 图片框
            .ant-list-item-extra {
              margin-left: 0;
              img {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 576px) {
    .ant-layout {
      background: none;
      .ant-layout-content {
        padding: 0px 0px 5px !important;
        .ant-list-items {
          .ant-list-item {
            padding: 0;
            margin-bottom: 10px;
            background-color: #fff;
            .ant-list-item-main {
              padding: 10px;
            }
          }
        }
        // 分页
        .ant-list-pagination {
          display: flex;
          justify-content: center;
          padding: 10px 0;
          border-radius: 0 0 10px 10px;
          background-color: #fff;
        }
      }
    }
  }
}